<?php
$key = 0;
?>
<div id="{!! $name !!}">
    @if(empty($options['value']))
        <div class="row">
            
            <div class="col-md-12" style="width:550px; margin: 5px 5px 5px 5px;">
                <div >
                {!! Form::select($name."[0][id]", $options['choices'], "", array_merge($options['attr'], ['class' => 'form-control select2 include'])) !!}
                </div>
            </div>
            <div class="col-md-12" style="width:200px; margin: 5px 5px 5px 5px;">
                {!! Form::input($type, $name."[0][number]", 2, array_merge($options['attr'], ['style' => 'width:200px;margin: 20px 0 0 0;'])) !!}
            </div>
            <div class="col-md-12" style="width:50px;">
                <button type="button" style="margin-top: 30px" class="close ">&times;</button>
            </div>
        </div>
        <?php $key ++; ?>
    @else
        @foreach($options['value'] as $value)
            <div class="row">
                <div class="col-md-12" style="width:550px; margin: 5px 5px 5px 5px;">
                    <div >
                    {!! Form::select($name."[{$key}][id]", $options['choices'], $value['id']??null, array_merge($options['attr'], ['class' => 'form-control select2 include'])) !!}
                    </div>
                </div>
                <div class="col-md-12" style="width:200px; margin: 5px 5px 5px 5px;">
                    {!! Form::input($type, $name."[{$key}][number]", $value['number']??1, array_merge($options['attr'], ['style' => 'width:200px;margin: 20px 0 0 0;'])) !!}
                </div>
                <div class="col-md-12" style="width:50px;">
                    <button type="button" style="margin-top: 30px" class="close ">&times;</button>
                </div>
            </div>
            <?php $key ++; ?>
        @endforeach
    @endif

    {!!  Form::input('button', 'increase_text_add', "添加", ['class' => "btn btn-primary btn-sm", 'style' => "margin: 20px 5px;", 'id' => "increase_text_add"]) !!}
</div>

@push('scripts')
    <script>
        $(".include.select2").select2({
            width: "550px",
        });
        var options = "<option value=''></option>";
        var key = {{ $key }};
        @foreach($options['choices'] as $key => $value)
            options += "<option value='{{ $key }}'>{{ $value }}</option>";
        @endforeach
        $('#increase_text_add').on('click', function () {

            node = "<div class=\"row\">\n" +
                "                <div class=\"col-md-12\" style='width:550px;margin: 5px 5px 5px 5px;'>\n" +
                "\n" +
                "                   <div>\n" +
                "                    <select class=\"form-control select2 include\" required=\"required\" style=\"margin: 5px\" name=\"content["+ key +"][id]\">" +
                options +
                "</select>\n" +
                "</div>\n" +
                "                </div>\n" +
                "                <div class=\"col-md-12\" style='width:200px;margin: 5px 5px 5px 5px;'>\n" +
                "                    <input class=\"form-control\" required=\"required\" style=\"width:200px;margin: 20px 0 0 0;\" name=\"content["+ key +"][number]\" type=\"include\" value=\"1\">\n" +
                "                </div>\n" +
                '               <div class="col-md-12" style="width:50px;">'+
                '                  <button type="button" style="margin-top: 30px" class="close ">&times;</button>'+
                '               </div>'+
                "            </div>";
            node = $(node).attr('name', "{!! $name !!}" + "[]");
            key ++;
            $(this).before(node);
            $(".include.select2").select2({
                width: "550px",
            });
        });

        $(document).on('click', ".close", function () {
            $(this).parent().parent().remove();
        });

        $('#content').attr('style', 'background: rgba(190,190,190,0.50); padding: 10px;  width: 1000px;display: inline-flex;')
    </script>
@endpush
@push('stylesheets')
    <style>
    </style>
@endpush
